<template>
  <div class="health-block">
    <el-tabs v-model="activeTab" class="mb-4">
      <el-tab-pane label="基本信息" name="basic">
        <BasicInfo
          :archive-info="archiveData?.archiveBasicInfo"
          @update-success="getHealthArchiveDetail(userId)"
          :requestSource="2"
        />
      </el-tab-pane>
      <el-tab-pane label="健康信息" name="health">
        <HealthInfo
          :archive-info="archiveData?.archiveHealthInfo"
          @update-success="getHealthArchiveDetail(userId)"
          :requestSource="2"
        />
      </el-tab-pane>
      <el-tab-pane label="生活方式" name="lifestyle">
        <WayOfLife
          :archive-info="archiveData?.archiveLifestyleInfo"
          @update-success="getHealthArchiveDetail(userId)"
          :requestSource="2"
        />
      </el-tab-pane>
      <el-tab-pane label="风险评估" name="risk">
        <div>风险评估（开发中...）</div>
      </el-tab-pane>
      <el-tab-pane label="健康建议" name="advice">
        <div>健康建议（开发中...）</div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts" setup>
import type { HealthArchiveDetailResponse } from "@/api/health";
import { healthApi } from "@/api/health";
import { ElMessage } from "element-plus";
import { onMounted, ref } from "vue";
import BasicInfo from "../healthRecords/components/BasicInfo.vue";
import HealthInfo from "../healthRecords/components/HealthInfo.vue";
import WayOfLife from "../healthRecords/components/WayOfLife.vue";

const activeTab = ref("basic");
const archiveData = ref<HealthArchiveDetailResponse>();

// 获取健康档案详情
const getHealthArchiveDetail = async (userId: number) => {
  try {
    const response = await healthApi.getHealthArchiveDetail({ userId });
    if (response.code === 0 && response.data) {
      archiveData.value = response.data;
    } else {
      ElMessage.error(response.message || "获取健康档案详情失败");
    }
  } catch (error) {
    console.error("获取健康档案详情失败:", error);
    ElMessage.error("获取健康档案详情失败，请稍后重试");
  }
};

// 用户ID
const userId = 100102; // 临时写死的用户ID

onMounted(() => {
  // TODO: 从路由参数或其他地方获取 userId
  getHealthArchiveDetail(userId);
});
</script>

<style lang="scss" scoped>
.health-block {
  background-color: #fff;
  border-radius: 4px;
  min-height: calc(100vh - 100px);
  padding: 20px;
}
</style>
